<template>
    <div class="register">
        <div class="formBox">
        <div class="title-container">
            <h2 class="title">{{getPageTitle($router.currentRoute.value.meta.title)}}</h2>
        </div>
        <el-form
        ref="ruleFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="demo-ruleForm"
        label-width="120px"
        >
            <el-form-item label="企业账号" prop="username">
                <el-input v-model="loginForm.username" type="text" autocomplete="off" placeholder="请输入企业账号" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="loginForm.password" type="password" autocomplete="off"  placeholder="请输入企业账号密码"/>
            </el-form-item>
            <el-form-item label="企业名称" prop="name">
                <el-input v-model="loginForm.name" type="text" autocomplete="off" placeholder="请输入企业名称" />
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="loginForm.email" type="text" autocomplete="off" placeholder="请输入电子邮箱" />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="loginForm.phone" type="text" autocomplete="off" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="从事行业" prop="manage">
                <el-input v-model="loginForm.manage" type="text" autocomplete="off" placeholder="请输入从事行业" />
            </el-form-item>
            <el-form-item label="公司地址" prop="address">
                <el-input v-model="loginForm.address" type="text" autocomplete="off" placeholder="请输入公司地址" />
            </el-form-item>
            <el-form-item label="公司简介" prop="intro">
                <el-input v-model="loginForm.intro" type="textarea" autocomplete="off" placeholder="请输入公司简介" />
            </el-form-item>
            <div class="btn">
            <el-button type="primary" @click="submitForm(ruleFormRef)"
                >注册</el-button
            >
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </div>
        </el-form>
        </div>
    </div>
</template>

<script setup>
    import {getPageTitle} from '../../utils/getPageTitle.js'
    import { ref,reactive,getCurrentInstance } from 'vue'
    import { register } from '../../api/enterprise.js'
    import { useRouter } from 'vue-router'
    const ruleFormRef = ref()
    const { proxy } = getCurrentInstance()
	const _this = proxy
    const router = useRouter();
    const loginForm = reactive({
        username: '',
        password: '',
        name:'',
        email:'',
        phone:'',
        manage:'',
        address:'',
        intro:''
    })
    const loginRules = reactive({
        username: [{ required: true, trigger: 'blur', message:'请输入企业账号',trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur', message:'请输入密码',trigger: 'blur' }],
        name: [{ required: true, trigger: 'blur', message:'请输入企业名称',trigger: 'blur' }],
        email: [{ required: true, trigger: 'blur', message:'请输入电子邮箱',trigger: 'blur' }],
        phone: [{ required: true, trigger: 'blur', message:'请输入联系电话',trigger: 'blur' }],
        manage: [{ required: true, trigger: 'blur', message:'请输入从事行业',trigger: 'blur' }],
        address: [{ required: true, trigger: 'blur', message:'请输入公司地址',trigger: 'blur' }],
        intro: [{ required: true, trigger: 'blur', message:'请输入公司简介',trigger: 'blur' }],
    })
    const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            register(loginForm).then(res=>{
                if(res.code===200){
                    setTimeout(()=>{
                        router.push({path:'/enterprise/login'})
                    },500)
                }
            })
        } else {
            return false
        }
    })
    }
    const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    }
</script>

<style lang="scss">
    .register{
        min-height: 100%;
        width: 100%;
        overflow: hidden;
        background: url(@/assets/img/login-bg.jpg);
        background-size: 100% 100%;
        text-align: center;
        .formBox{
            width: 700px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-55%,-60%);
            .title{font-size: 24px;font-weight: 700;}
        }
    }
</style>
